<template>
  <div>
    <!-- 定义一个div 当做显示echarts图表的容器 -->
    <el-row>
      <el-col :span="12">
        <div ref="main" style="width: 100%;height:400px;"></div>
      </el-col>
      <el-col :span="12">
        <div ref="main2" style="width: 100%;height:400px;"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const main = ref({})
const data = [
  { name: '手机通讯', value: 15000 },
  { name: '智能设备', value: 3000 },
  { name: '书籍', value: 500 },
  { name: '电脑', value: 6000 },
]
const xData = ['手机通讯', '智能设备', '书籍', '电脑']
const xValues = [15000, 3000, 500, 6000]
const main2 = ref({})

onMounted(() => {
  initEcharts1(main.value, data, 'spzx订单销售额统计')
  initEcharts2(main2.value, xData, xValues)
})
const initEcharts1 = (container, data, title) => {
  //使用echarts将数据展示到 上面的div中
  var myChart = echarts.init(container)
  var option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '5%',
      left: 'center',
    },
    series: [
      {
        name: title,
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data,
      },
    ],
  }
  myChart.setOption(option)
}
const initEcharts2 = (chartDom, xData, xValues) => {
  var myChart = echarts.init(chartDom)
  var option

  option = {
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: xValues,
        type: 'bar',
      },
    ],
  }

  option && myChart.setOption(option)
}
</script>
